<template>
  <view :class="[`${prefixCls}-verify-code-container`]">
    <uv-text
      :type="type"
      :text="verify.text"
      :customStyle="{ fontSize: size === 'mini' ? '10px' : size === 'small' ? '12px' : size === 'large' ? '16px' : '14px', opacity: verify.disabled ? '0.5' : 1, ...customStyle }"
      @click="getSmsVerifyCode"
      v-if="mode === 'text'"
    />
    <uv-button :type="type" :text="verify.text" :size="size" :hairline="true" :customStyle="customStyle" :disabled="verify.disabled" @click="getSmsVerifyCode" v-else />
  </view>
</template>

<script>
import { getSmsVerifyCode, passwordCode, verificationCode } from '@/api/common'
/**
 * props
 * @description
 * @property {String} mode 展示模式                         button:按钮 | text:文本
 * @property {String} type 主题配色                         primary | success | warning  | error | info
 * @property {String} size 大小                             large  | normal  | small  | mini
 * @property {Object} customStyle 大小                      {}
 * @property {String} mobileKey 发送验证码的字段名           默认 mobile
 * @property {String | Number} mobile 发送验证码的手机号
 * @property {Object} extends 发送验证码的额外请求字段配置
 */
export default {
  name: 'cuVerifyCode',
  components: {},
  mixins: [],
  props: {
    mode: {
      type: String,
      default: 'button',
    },
    type: {
      type: String,
      default: 'primary',
    },
    size: {
      type: String,
      default: 'small',
    },
    customStyle: {
      type: [Object, String],
      default: () => ({}),
    },
    mobileKey: {
      type: String,
      default: 'mobile',
    },
    mobile: {
      type: [String, Number],
      default: '',
    },
    extends: {
      type: Object,
      default: () => {
        return {
          // msg_type: 'login',
        }
      },
    },
  },
  data() {
    return {
      verify: {
        time: 60,
        text: '获取验证码',
        disabled: !1,
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    // 获取验证码
    async getSmsVerifyCode() {
      const _key = this.mobileKey
      const _mobile = this.mobile
      const _extends = this.extends

      if (!this.$uv.test.mobile(_mobile)) return this.$uv.toast('请输入有效的手机号!')

      if (this.verify.disabled) return

      const params = { [_key]: _mobile, ..._extends }
      let res = {}
      switch (_extends.scene) {
        case undefined:
          res = await getSmsVerifyCode(params)
          break
        // 修改用户绑定手机号
        case 'updatePhone':
          res = await verificationCode(params)
          break
        // 修改房间密码验证
        case 'checkCode':
          res = await passwordCode()
          break
        default:
          break
      }
      if (res.errcode === 0) {
        this.showCountDown()
        this.$uv.toast('发送成功!')
      }
    },

    //倒计时
    showCountDown() {
      this.verify.disabled = !0
      let currentTime = this.verify.time
      const timer = setInterval(() => {
        this.verify.text = currentTime + '秒'
        if (currentTime-- <= 0) {
          clearInterval(timer)
          this.verify.text = '获取验证码'
          this.verify.time = 60
          this.verify.disabled = !1
        }
      }, 1e3)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('verify-code-container')} {
  position: relative;
}
</style>
